<template>
  <div class="SettingHome" v-drag>
    <div class="SettingHome_head">
      设置
      <div class="right" >
        <span @click="chanceDialog">关闭</span>
      </div>
    </div>
    <div class="SettingHome_body">
      <div class="body_left">
        <div @click="switecTree(item)" :class="item.key===treeActive&&'active'" class="body_left_li" v-for="item in treeList" :key="item.key">
          {{ item.name }}
        </div>
      </div>
      <div class="body_right">
        <switch-pet v-if="treeActive===0"/>
        <about-us v-else-if="treeActive===1"/>
      </div>
    </div>
    <div class="SettingHome_floor">
      <button class="btn">保存</button>
      <button class="btn" @click="chanceDialog">取消</button>
    </div>
  </div>
</template>

<script>

import SwitchPet from '@/views/setting/components/switchPet'
import AboutUs from '@/views/setting/components/aboutUs'
export default {
  name: 'SettingHome',
  data () {
    return {
      treeList: [
        {
          name: '切换宠物',
          key: 0
        },
        {
          name: '关于我们',
          key: 1
        }
      ],
      treeActive: 0
    }
  },
  created () {

  },
  mounted () {

  },
  activated () {

  },
  methods: {
    chanceDialog() {
      this.$emit('switchDiaSetting', false)
    },
    switecTree(item) {
      this.treeActive = item.key
    }
  },
  deactivated () {

  },
  unmounted () {

  },
  components: { AboutUs, SwitchPet }
}
</script>

<style scoped lang='scss'>
.SettingHome {
  position: absolute;
  width: 50%;
  pointer-events: auto;
  height: 500px;
  border-radius: 4px;
  left: 25%;
  top: 15%;
  z-index: 10;
  box-shadow: $--box-shadow-lighter;
  background-color: $--color-next;
  &_head{
    background-color: $--color-primary;
    height: 30px;
    width: 100%;
    box-sizing: border-box;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: $--text-color-next;
    display: flex;
    align-items: center;
    padding: 0 10px;
    .right{
      flex: 1;
      text-align: right;
      span{
        cursor: pointer;
      }
    }
  }
  &_body{
    height: 430px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    .body_left{
      height: 100%;
      width: 100px;
      border-right: 1px solid $--border-color;
      padding-top: 5px;
      padding-left: 10px;
      .body_left_li{
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        cursor: pointer;
      }
      .body_left_li:hover,
      .active{
        color: $--color-primary;
      }
    }
    .body_right{
      width: calc(100% - 100px);
      height: 100%;
      padding-top: 5px;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  &_floor{
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid $--border-color;
    .btn{
      margin-left: 10px;
    }
  }
}
</style>
